<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Personal's Page</title>
<link rel="stylesheet" href="/social/static/css/jquery-ui.css" />
<script src="/social/static/js/jquery-1.8.3.js"></script>
<script src="/social/static/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/social/static/css/Personal_Info.css"  />
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>
</head>

<body>
	<div id="main_wrapper">
    		<div class="header">
            	<p style="color:white;">This is Header</p>
            </div><!--End .header-->
    	<div class="content">
        	
            <div class="container">
            	<div class="personal_function">
                	<div class="personal_info_left">
                    	<p style="font-size:20px; font-weight:bold;">Thông tin cá nhân</p>
                        <img src="images/People_Icon.png" alt="Avatar" width="100" height="100" style="border:1px solid #FFFBF0;" />
                        <p class="personal_name" style="float:right; font-size:20px; font-weight:bold; color:white; margin-right:40px;">Admin ID</p>
                        <p>Họ và Tên:</p>
                        <p>Ngày tham gia:</p>
                        <p>Sinh Nhật:</p>
                        <p>Giới Tính:</p>
                    </div>
                    <div class="personal_function_left">
                    	<p style="font-size:20px; font-weight:bold;">Chức năng</p>
                        <ul class="functions">
                        	<li><a href="#">Trang chủ</a></li>
                        	<li><a href="Personal_Info.html">Chỉnh sửa thông tin cá nhân</a></li>
                            <li><a href="#">Thay đổi password</a></li>
                            <li><a href="#">Album Ảnh</a></li>
                            <li><a href="#">Thoát</a></li>
                        </ul>
                    </div>
                </div>
                <div class="personal_page">
                	<div id="tabs">
                    	<ul>
                        	<li><a href="#tabs-1">Xem Thông Tin Cá Nhân</a></li>
                            <li><a href="#tabs-2">Chỉnh Sửa Thông Tin</a></li>
                            <li><a href="#tabs-3">Avatar</a></li>
                        </ul>
                        <div id="tabs-1">
                        	<p style=" font-weight:bold; color:blue;">Thông tin cơ bản</p>
                            <div class="display">
                            	<div class="display_label">
                                	<p>Họ và Tên:</p>
                                </div>
                                <div class="display_field">
                                	<p>Trà Lê Tiến Đạt</p>
                                </div>
                            </div><!--End .display -->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Sinh nhật:</p>
                                </div>
                                <div class="display_field">
                                	<p>01/08/1990</p>
                                </div>
                            </div><!--End .display -->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Địa chỉ:</p>
                                </div>
                                <div class="display_field">
                                	<p>Thiên Đình - Cung Trăng</p>
                                </div>
                            </div><!--End .display -->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Tự bạch:</p>
                                </div>
                                <div class="display_field">
                                	<p>Thích chơi game, coi phim heo....</p>
                                </div>
                            </div><!--End .display -->
                        </div>
                        <div id="tabs-2">
                        	<p style="font-weight:bold;color:blue;">Chỉnh sửa thông tin</p>
                            <p style="font-size:12px; font-style:italic;">Các bạn vui lòng cập nhập thông tin và nhấn vào nút "Cập nhập" phía dưới</p>
                            <div class="display">
                            	<div class="display_label">
                                	<p>Họ và Tên::</p>
                                </div>
                                <div class="display_field">
                                	<input type="text" name="username" id="username" maxlength="200" placeholder="Hãy nhập Họ và Tên" size="50"/>
                                </div>
                            </div><!--End .display-->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Ngày Sinh:</p>
                                </div>
                                <div class="display_field">
                                	<input type="date" name="date" id="date" size="50"/>
                                </div>
                            </div><!--End .display-->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Giới Tính:</p>
                                </div>
                                <div class="display_field">
                                	<select>
                                    	<option>Nam</option>
                                        <option>Nữ¯</option>
                                    </select>
                                </div>
                            </div><!--End .display-->
                            <div class="display">
                            	<div class="display_label">
                                	<p>Tá»± báº¡ch:</p>
                                </div>
                                <div class="display_field">
                                	<textarea rows="5" cols="50" placeholder="Nhập một vài điều về bạn...">
                                    	
                                    </textarea>
                                </div>
                            </div><!--End .display-->
                            <div class="clear"></div>
                            <div class="btn_submit">
                            	<input type="submit" name="btn_submit" id="btn_submit" width="40" height="100" value="Cáº­p Nháº­p"/>
                            </div>
                            <div class="btn_reset">
                            	<input type="reset" name="btn_reset" id="btn_reset" width="40" height="100" value="Nháº­p láº¡i"/>
                            </div>
                        </div>
                        <div id="tabs-3">
                        	<p style="font-weight:bold;color:blue;">Cập nhập Avatar</p>
                            <div class="avatar">
                            	<input type="file" name="input_image" id="input_image" value="Browse"/>
                            </div>
                            <div class="btn_submit">
                            	<input type="submit" name="btn_submit" id="btn_submit" value="Đăng Ảnh"/>
                            </div>
                        </div>
                    </div><!--End #tabs-->      
                </div>
                <div class="friend_album">
                	<div class="friendship">
                    	<h1 style="font-size:20px; font-weight:bold;">>Bạn Bè</h1>
                        <p>Số lượng Bạn bè:</p>
                        <div class="friend_img_avatar">
                        	<img class="img_avatar" src="images/People_Icon_Women.png" width="120" height="120" />
                            <img class="img_avatar" src="images/People_Icon_Women.png" width="120" height="120" />
                            <img class="img_avatar" src="images/People_Icon_Women.png" width="120" height="120" />
                            <img class="img_avatar" src="images/People_Icon_Women.png" width="120" height="120" />
                        </div>
                        <p style="float:right;"><a href="#">Xem Thêm >></a></p>
                    </div>
                    <div class="my_albums">
                    	<h1 style="font-size:20px; font-weight:bold;">Album Ảnh</h1>
                        <p>Số lượng Album:</p>
                        <div class="my_albums_img">
                        	<img class="img_albums" src="images/Demo/1274989955_4.jpg" width="120" height="120"/>
                            <img class="img_albums" src="images/Demo/1274989955_4.jpg" width="120" height="120"/>
                            <img class="img_albums" src="images/Demo/1274989955_4.jpg" width="120" height="120"/>
                            <img class="img_albums" src="images/Demo/1274989955_4.jpg" width="120" height="120"/>
                        </div>
                        <p style="float:right;"><a href="#">Xem Thêm >></a></p>
                    </div>
                </div>
            </div><!--End .container-->
        </div><!-- End .content-->
            <div class="footer">
            	<p style="color:white;">This is Footer</p>
            </div><!--End .footer-->
    </div><!--End #main_wrapper-->
</body>
</html>

